<template>
  <div style="width: 80%; margin: 0 10%;">
    <div class="card" style="display: flex">
      <div>
        <el-input style="width: 240px;" v-model="data.searchTitle" placeholder="请输入标题查询"
          prefix-icon="Search"></el-input>
        <el-button style="margin-left: 10px;" type="primary" @click="load()">查询</el-button>
        <el-button style="margin-left: 10px;" @click="reset()">重置</el-button>
        <el-select v-model="data.noticeType" placeholder="公告类型" style="width: 120px; margin-left: 10px;"
          @change="load()">
          <el-option label="全部" value="" />
          <el-option label="公告" value="公告" />
          <el-option label="政策" value="政策" />
        </el-select>
      </div>
    </div>
    <div class="card">
      <el-table :data="data.noticeList" :default-sort="{ prop: 'publishTime', order: 'descending' }">
        <el-table-column label="公告标题" prop="title" @click="window.open(`/home/detail/${id}`, '_blank')">
          <template #default="scope">
            <span @click="handleRowClick(scope.row.id)" class="clicktitle" >
              {{ scope.row.title }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" sortable prop="publishTime" />
      </el-table>
      <div style="margin-top: 15px;">
        <el-pagination v-model:current-page="data.pageNumber" v-model:page-size="data.pageSize"
          :page-sizes="[1, 5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="data.total"
          @size-change="load()" @current-change="load()" />
      </div>
    </div>
  </div>
</template>

<script setup>
import request from '@/utils/request';
import { reactive, } from 'vue';

const data = reactive({
  pageNumber: 1,
  pageSize: 5,
  total: 0,
  noticeList: [],
  searchTitle: "",
  noticeType: "",
})


const load = () => {//查询所有公告
  request.get('/notice/searchPage', {
    params: {
      pageNumber: data.pageNumber,
      pageSize: data.pageSize,
      title: data.searchTitle,
      noticeType: data.noticeType,
    }
  }).then(res => {
    data.noticeList = res.data.list
    data.total = res.data.total
  })
}
load()


const reset = () => {
  data.searchTitle = ''
  load()
}
const handleRowClick = (id) => {
  window.open(`/home/detail/${id}`, '_blank');
};

</script>

<style scoped>
  .clicktitle {
    color: #333;
    cursor: pointer;
  }
  .clicktitle:hover {
    text-decoration: underline;
    color: #409EFF;
  }
</style>